<script type="text/javascript">
	var price1 = 0;
	var price2 = 0;
	$(function(){
		$("#tipDialog").dialog({
			autoOpen:false,
			modal:true,
			buttons:{
				"OK":function(){
					$(this).dialog("close");
					location.reload();
				}
			}
		});
		
		$(".price:eq(0),.price:eq(1)").change(function(){
			$.ajax({
				url:"/merchant/index/caculate-sku-and-pallet",
				dataType:"json",
				type:"post",
				data:{"skus":$(".price:eq(1)").val(),"pallets":$(".price:eq(0)").val()},
				success:function(json){
					$(".price1").html("$"+json);
					price1 = json;
					var total = price1 + price2;
					$(".priceTotal").html("$"+total.toFixed(2));
				}
			});
		});
		
		$(".price:eq(2)").change(function(){
			$.ajax({
				url:"/merchant/index/caculate-item",
				dataType:"json",
				type:"post",
				data:{"items":$(".price:eq(2)").val()},
				success:function(json){
					$(".price2").html("$"+json);
					price2= json;
					var total = price1 + price2;
					$(".priceTotal").html("$"+total.toFixed(2));
				}
			});
		});
		
		$(".price:eq(0)").val("<{$plan.pallet_qty}>");
		$(".price:eq(1)").val("<{$plan.sku_qty}>");
		$(".price:eq(2)").val("<{$plan.item_qty}>");
		$(".price:eq(1)").change();
		$(".price:eq(2)").change();
		
		$(".submit").click(function(){
			var options = {
				url:"/merchant/plan/edit",
				dataType:"json",
				type:"post",
				success:function(json){
					$("#tipDialog").html(json.result);
					$("#tipDialog").dialog("open");
				}
			};
			$("#step2Form").ajaxSubmit(options);
		});
		$("[name=toChange]:eq(0)").click(function(){
			$("#planShow").show();
		});
		$("[name=toChange]:eq(1)").click(function(){
			$("#planShow").hide();
		});
	});
  
</script>
  
<div class="position"><a href='/default/index'>Home</a> &gt; <a href='/merchant/my-account'>Merchant Center</a>  &gt; Your Account &gt; Your Plan</div>
<br/>
<div class="userinfo">
	<ul style="margin-left:20px">
		<li style="list-style-type:disc;font-size:20px;font-weight:bold">Current Plan & Usage</li>
		<li style="list-style-type:circle;font-size:15px;margin-top:20px">Current Plan:$<{$plan.total}>/month</li>
		<li style="list-style-type:circle;font-size:15px;">Next Billing Date:<{$plan.billing_date}>&nbsp;&nbsp;<{$dateMonth}></li>
		<li style="list-style-type:circle;font-size:15px;">Usage in this Billing Cycle:</li>
		<div style="padding-left:30px">			
			<li style="list-style-type:disc;">Storage:<{$planUsage.pallet_used}>/<{$planUsage.pallet_qty}></li>
			<li style="list-style-type:disc;">SKUs:<{$planUsage.sku_used}>/<{$planUsage.sku_qty}></li>
			<li style="list-style-type:disc;">Plan items:<{$planUsage.item_used}>/<{$planUsage.item_qty}></li>
		<div>
	</ul>
	
	<div >
		<span style="font-weight:bold">Do you want to change your plan?</span><br/>
		<input type="radio" name="toChange" />&nbsp;&nbsp;&nbsp;&nbsp;Yes,I wanna change it&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="radio" name="toChange" checked/>&nbsp;&nbsp;&nbsp;&nbsp;No,thanks
	</div>
	
	<div style="display:none;" id="planShow">
	<form id="step2Form">
		<div class="">
        	<img src="/images/steps-1.gif" />
			<P>
			<p>
            How much storage space will you need per month?<br/>
			<select class="price" name="pallet">
				<{foreach from=$pallets item=pallet}>
					<option value="<{$pallet.range_end}>"><{$pallet.range_end}></option>
				<{/foreach}>
			</select>&nbsp;&nbsp;&nbsp;&nbsp;Pallets<br/>
			
			How many unique product IDs (SKUs) will you need?<br/>
			<select class="price" name="sku">
				<{foreach from=$skus item=sku}>
						<option value="<{$sku.range_end}>"><{$sku.range_end}></option>
				<{/foreach}>
			</select>
			</p>
            <span class="total-price-box">Storage and Support:<span class="total-price price1"></span></span>                 
            </p>
            
            <img src="/images/steps-2.gif" />
			<p>
			How many plan items will you be shipping or returning per month?<br/>
			<select class="price" name="item">
				<{foreach from=$items item=item}>
					<option value="<{$item.range_end}>"><{$item.range_end}></option>
				<{/foreach}>
			</select>
			</p>
				
			<p>
            	<span class="total-price-box">Handling:<span class="total-price price2"></span>&nbsp;</span>
			</p>

            <p>
            	<span class="total-price-box">Total:<span class="total-price priceTotal"></span>&nbsp;&nbsp;</span>
			</p>
		</div>
				
         <p class="text-center">
               <span class="button-l submit">Submit</span>
          </p>
	</form>
	</div>
</div>
	
<div style="display:none" id="tipDialog" title="Tip"> </div>